<template id="AlbumDetail">
  <div class="AlbumDetail">
    <album-details
      v-if="productList.length > 0"
      ref="albumDetails"
      :productList="productList"
      :albumTitle="albumTitle"
      :page="page"
      @click="buyProduct"
      @buyProductDeep="buyProductDeep"
      @change="changePage"
      @upCallback="upCallback"
      @gotoDetail="gotoDetail"
    />
    <div class="noneTip" v-else>
      <img :src="deafultImage" class="deafultImage" />
      <p>该专辑下暂无任何商品哦~</p>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import AlbumDetails from "./components/AlbumDetails.vue";
import { getDoodsListApi, createOrderApi } from "@/api";
import { iscode, getWidth } from "@/utils";
import { Message } from "element-ui";
import { Toast } from "vant";
export default {
  name: "albumDetail",
  components: { AlbumDetails },
  // 定义属性
  data() {
    return {
      deafultImage: require("@/assets/images/mobile/default.png"),
      productList: [],
      page: {
        // 默认当前分页
        defaultPagination: 1,
        // 总页数
        pageCount: 10,
        totalPages: 0,
      },
      albumTitle: "",
      platform: 1, //  "platform":1PC 2手机
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async getDoodsList() {
      let result = await getDoodsListApi({
        goods_album_id: this.$route.query.id,
        page: this.page.defaultPagination,
        pagesize: this.page.pageCount,
      });
      if (iscode(result)) {
        this.page.totalPages = result.result.count;
        this.productList = result.result.list;
        if (this.productList.length > 0) {
          this.albumTitle = result.result.list[0].album_name;
          this.productList.map((item, index) => {
            this.$set(item, "image", result.result.show_url + item.images[0]);
            if (item.pre_start_time) {
              let date, month, day, time;
              date = item.pre_start_time.split(" ")[0].split("-");
              month = date[1] + "月";
              day = date[2] + "日";
              time =
                month +
                day +
                item.pre_start_time.split(" ")[1].substr(0, 5) +
                "开售";
              this.$set(item, "sellTime", time);
            }
          });
        }
      }
    },
    buyProduct(payload) {
      this.$router.push({
        path: "/mail/productDetail",
        query: {
          id: payload.id,
        },
      });
    },
    // 点击购买直接跳转到确认订单界面
    buyProductDeep(payload) {
      if (payload.is_buy) {
        this.createOrder(payload);
      } else {
        this.$router.push({
          path: "/mail/productDetail",
          query: {
            id: payload.id,
          },
        });
      }
    },
    async createOrder(payload) {
      let result = await createOrderApi({
        goods_id: payload.id,
        hashcode:
          "0x456543fd67hsd3hhjsdb5456543fd67hsd3hhjsdb5456543fd67hsd3hhjsdb5456543fd67hsd3hhjsdb5",
        platform: this.platform,
      });
      if (result.code == 0) {
        this.$router.push({
          path: "/mail/confirmProducts",
          query: {
            id: payload.id,
            order_sn: result.result.order.order_sn,
          },
        });
      } else if (result.code == 200019) {
        if (getWidth() <= 768) {
          Toast(result.message);
          this.$router.push("/authentication");
        } else {
          Message({
            showClose: true,
            message: result.message,
            type: "error",
          });
          // this.$router.push("/");
        }
      } else {
        if (getWidth() <= 768) {
          Toast(result.message);
          this.$router.push("/login");
        } else {
          Message({
            showClose: true,
            message: result.message,
            type: "error",
          });
          // this.$router.push("/");
        }
      }
    },
    changePage(payload) {
      this.page.defaultPagination = payload;
      this.getDoodsList();
    },

    //下拉刷新
    async upCallback(payload) {
      let result = await getDoodsListApi({
        goods_album_id: this.$route.query.id,
        page: payload.page.num,
        pagesize: payload.page.size,
      });
      if (iscode(result)) {
        let arr = result.result.list;
        // 如果是第一页需手动置空列表
        if (payload.page.num === 1) {
          this.productList = [];
        }
        // 把请求到的数据添加到列表
        this.productList = this.productList.concat(arr);
        this.productList.map((item, index) => {
          this.$set(item, "image", result.result.show_url + item.images[0]);
          if (item.pre_start_time) {
            let date, month, day, time;
            date = item.pre_start_time.split(" ")[0].split("-");
            month = date[1] + "月";
            day = date[2] + "日";
            time =
              month +
              day +
              item.pre_start_time.split(" ")[1].substr(0, 5) +
              "开售";
            this.$set(item, "sellTime", time);
          }
        });
        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          payload.mescroll.endSuccess(arr.length);
        });
      }
    },
    // 跳转到详情页
    gotoDetail(item) {
      this.$router.push({
        path: "/mail/productDetail",
        query: {
          id: item.id,
        },
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getDoodsList();
    if (getWidth() <= 768) {
      this.platform = 2;
    } else {
      this.platform = 1;
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.noneTip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 5vh;
  .deafultImage {
    width: 430px;
  }
  p {
    margin-top: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
}
@media screen and (max-width: 768px) {
  .AlbumDetail {
    min-height: 100vh;
    .noneTip {
      margin: 0;
      position: absolute;
      width: 100%;
      top: 35vh;
      p {
        margin-top: 50px;
        font-size: 22px;
      }
    }
  }
}
</style>
